<template>
  <div class="step-box">
    <el-form ref="form" :model="form" label-width="150px" disabled>
      <div class="form-box">
        <p class="sub-title">门店基础信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="业态：" prop="businessType">
              <el-cascader
                v-model="form.businessType"
                :options="categoryList"
                :show-all-levels="false"
                :props="{label: 'name', value: 'id', children: 'categoryTreeVOS', multiple: true, emitPath: false}"
                clearable
              />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="门店名称：" prop="scenicName">
              <el-input v-model="form.scenicName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="所在区域：" prop="scenicAddress">
              <el-cascader
                v-model="form.scenicAddress"
                :options="areaList"
                clearable
              />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="门店地址：" prop="scenicDetailAddress">
              <el-autocomplete
                v-model.trim="form.scenicDetailAddress"
                clearable
                placeholder="请输入"
                :trigger-on-focus="false"
              />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item>
              <div id="mapContainer" class="map-box" />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="门店坐标：">
              <el-input v-model="form.coordinate" placeholder="根据详细地址自动获取坐标" disabled />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="门店联系电话：" prop="phoneNumbers">
              <p v-for="(item,index) in form.phoneNumbers" :key="index" class="phone-item">
                <el-input v-model="item.phone" placeholder="请输入" clearable />
              </p>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="门店图片：" prop="scenicImgs">
              <UploadFile :file-list="form.scenicImgs" :limit="10" disabled />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>

import { getCategoryList } from '@/api/common'
import UploadFile from '@/components/UploadFile/index.vue'
import { mapKey } from '@/utils/const'
import { AREA_LIST } from '@/utils/enum'
export default {
  name: 'Step4',
  components: {
    UploadFile
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      map: '', // 地图实例
      areaList: AREA_LIST,
      industryCode: '',
      categoryList: [],
      form: {},
      shopList: []
    }
  },

  watch: {
    formDetail(value) {
      const phones = value.phoneNumbers ? value.phoneNumbers.split(',') : []
      value.phoneNumbers = phones.map((item) => ({ phone: item }))
      value.scenicAddress = value.scenicAddress?.split(',')
      value.businessType = value.businessType?.split(',')
      value.coordinate = `${value.lon},${value.lat}`
      this.form = value
      this.industryCode = value.industryCode
      this.getCategoryTree()
      this.loadScript()
    }
  },

  methods: {

    // 获取类目
    getCategoryTree() {
      const data = {
        industryCode: this.industryCode
      }
      getCategoryList(data).then(res => {
        this.categoryList = res || []
      }).catch(() => {})
    },

    loadScript() {
      window.initMap = () => {
        this.initMap()
      }
      const script = document.createElement('script')
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=${mapKey}&callback=initMap`
      document.head.appendChild(script)
    },

    // 初始化地图
    initMap() {
      const { lon, lat } = this.form
      // eslint-disable-next-line no-undef
      this.map = new BMap.Map('mapContainer') // 创建Map实例
      // eslint-disable-next-line no-undef
      this.map.centerAndZoom(new BMap.Point(lon || 120.08158189136478, lat || 29.311150347824732), 15) // 初始化地图,设置中心点坐标和地图级别

      if (lon && lat) {
        // eslint-disable-next-line no-undef
        const point = new BMap.Point(lon, lat)
        this.addMarker(point)
      }
    },

    // 添加覆盖物
    addMarker(point) {
      this.map.centerAndZoom(point, 15)
      // eslint-disable-next-line no-undef
      const marker = new BMap.Marker(point) // 创建标注
      this.map.addOverlay(marker)
      this.form.coordinate = `${point.lng},${point.lat}`
    }

  }
}
</script>
<style lang="scss" scoped>
@import 'step';
</style>
